<template>
    <div class="pt44">
        <div class="content">
            <div class="weui-cell b-b1">
                <div class="weui-cell__hd"><span>借多少</span></div>
                <div class="weui-cell__bd">
                    <input @input="inputAmount" @change="applyMoneyChange" v-bind:class="{input_amount:loanAmount!=''}" class="text-number weui-input text_right placeholder" type="tel" id="inputAmount" v-bind:placeholder="this.lamPlaceholder">
                </div>
                <div class="weui-cell__ft">元</div>
            </div>
            <div v-show="showAmountTishi" class="weui_cell tishi">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class="tar tr">金额错误,请输入{{this.$store.state.lowLimit}}-{{this.$store.state.upLimit}}</p>
                </div>
            </div>
            <div class="repay_title">最后还款日: <span>{{ this.$store.state.repaymentDate }}</span></div>
            <div class="weui-flex">
              <div class="weui-flex__item"><div class="casket">
                  <div class="daily_interest repay-img"></div>
                  <div class="cost_statement">日利息</div>
                  <div class="text-number">{{ dailyInterest }}</div>
              </div></div>
              <div class="weui-flex__item"><div class="casket">
                  <div class="maximum-repay repay-img"></div>
                  <div class="cost_statement">超期还款服务费</div>
                  <div class="text-number">{{ coverChargeMoney }}</div>
              </div></div>
              <div class="weui-flex__item"><div class="casket">
                  <div class="freeze repay-img"></div>
                  <div class="cost_statement">冻结金额</div>
                  <div class="text-number">{{ this.$store.state.maximumRepay }}</div>
              </div></div>
            </div>
        </div>
        <div id="agreement-box" class="agreement-box mt-15">
            <label for="agreement-check"><input type="checkbox" v-model="checked" @change="checkedChange" id="agreement-check" class="light" name="agreement" value="agreement" checked=""><i>✓</i>
            我已阅读并同意</label>
            <router-link to="agreement/1" class="contract">《个人服务合同（一）》</router-link>
        </div>
        <div class="btn_box">
           <a @click="toinfo" v-bind:class="[infoOk?'':'weui-btn_disabled']" class="weui-btn weui-btn_primary">下一步</a>
        </div>
    </div>
</template>

<script>

import cm from "../components/common.js";
export default  {
    name: 'interest',  // 组件利息计算
    data () {  // 数据
        return {
            msg: 'interest',
            dailyInterest:"0.00",
            loanAmount:"",
            coverChargeMoney:"0.00",  // 超期费用
            maximumRepay:"0.00",
            infoOk:false,
            checked:true,
            lamPlaceholder:"请输入金额600-50000",
            showAmountTishi:false
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        initValue(){
            this.$store.state.channelNo = "01";
        },
        inputAmount(){
          var theloanAmount = $("#inputAmount").val();
            if(/^0\d/.test(theloanAmount)){
              theloanAmount = "0";
            }
            theloanAmount = theloanAmount.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
            theloanAmount = theloanAmount.replace(/^\./g, ""); //验证第一个字符是数字而不是
            theloanAmount = theloanAmount.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            theloanAmount = theloanAmount.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            theloanAmount = theloanAmount.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
            this.loanAmount = theloanAmount;
            $("#inputAmount").val(this.loanAmount);
            this.countDailyInterest();
            this.hideTishi();
        },
        countDailyInterest(){

            if(this.loanAmount!="" && this.$store.state.interestRate != ""){
                this.$store.state.dailyInterest = this.dailyInterest = (parseFloat(this.$store.state.interestRate) * this.loanAmount +0.0000001).toFixed(2);
                this.coverChargeMoney = (this.$store.state.coverCharge * this.loanAmount+0.0000001).toFixed(2);
                this.$store.state.maximumRepay = ((parseFloat(this.$store.state.interestRate)*25+this.$store.state.coverCharge) * this.loanAmount + parseFloat(this.loanAmount) + 0.0000001).toFixed(2);
            }else{
                this.$store.state.dailyInterest = "0.00";
                this.$store.state.maximumRepay = "0.00";
                this.coverChargeMoney = "0.00"
            }
            if(parseFloat(this.loanAmount)>=this.$store.state.lowLimit && parseFloat(this.loanAmount) <=this.$store.state.upLimit && this.checked){
                this.infoOk = true;
            }else{
                this.infoOk = false;
            }
        },
        checkedChange(){
            if(parseFloat(this.loanAmount)>=this.$store.state.lowLimit && parseFloat(this.loanAmount) <=this.$store.state.upLimit && this.checked){
                this.infoOk = true;
            }else{
                this.infoOk = false;
            }
        },
        toinfo(){
            if(this.infoOk){
                location.hash = "#/info"
            }else if(!this.checked){
                this.$store.state.errorMsg = "请阅读并同意协议"
            }else{
                this.$store.state.errorMsg = this.lamPlaceholder;
            }
        },
        applyMoneyChange(){
            this.$store.state.loanApplyMoney = this.loanAmount;
            this.isShowTishi();
        },
        isShowTishi(){
            if(parseFloat(this.loanAmount) < this.$store.state.lowLimit || parseFloat(this.loanAmount) > this.$store.state.upLimit){
                this.showAmountTishi = true;
            }else{
                this.showAmountTishi = false;
            }
        },
        hideTishi(){
            if(parseFloat(this.loanAmount) >= this.$store.state.lowLimit && parseFloat(this.loanAmount) <= this.$store.state.upLimit){
                this.showAmountTishi = false;
            }
        }
    },
    beforeMount:function  () {
        this.initValue();

        var nowDate25 =  new Date(this.$store.state.nowDate);

        var ntheDate = nowDate25.getDate();
        nowDate25.setDate(ntheDate+25);
        this.$store.state.repaymentDate = cm.getDateStrFormate("yyyy-mm-dd",nowDate25);
        this.$store.commit("getLimit","01");
    },
    mounted:function() {
        this.$store.commit("getRate");
        this.$store.commit('changeTitle','小通帮你借');
        if(window.isGetLoanMoney ||  this.$store.state.loanApplyMoney != ""){
            this.loanAmount = this.$store.state.loanApplyMoney;
            $("#inputAmount").val(this.loanAmount);
            this.countDailyInterest();
        }
        var _this = this;
        setTimeout(function () {
            _this.lamPlaceholder = "请输入金额" + _this.$store.state.lowLimit + "-" + _this.$store.state.upLimit
        },800);
        var isIphone = cm.ismobile();
        if(isIphone == "0"){
          $("#inputAmount").attr("type","number");
        }
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/vendors/weui-sass/src/style/base/mixin/_setOnepx";
@import "../assets/scss/_agreeBox";
@import "../assets/scss/_placeholder.scss";
.content{
    color: #fff;
    font-size: 17px;
    background-color: #2792e4;
    .weui-cell__ft{
        color: #fff;
    }
}
.b-b1{
    &:after{
        @include setBottomLine();
        left: 15px;
        right: 15px;
        bottom: 7px;
    }
}
.weui-cell__bd{
    >input.input_amount{
        font-size: 35px;
        color: #fff;

    }
}

.repay_title{
    padding-left: 15px;
}
.weui-flex{
   margin-top: 35px;
   padding-bottom: 15px;
}
.weui-flex__item{


    &:first-child{
       &:after{height:0}
    }
    .casket{


        position: relative;
        text-align: center;
        width: 100%;
        >div{
            margin: auto;
        }
        >div.cost_statement{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.54);
            margin: 5px 0 8px 0;
        }
    }
    .casket:nth-child(1){
        &:after{
            @include setLeftLine();
            height: 80%;
            margin-top: 5%;
        }
    }

}

.daily_interest{
    background-image: url('/FuLiBao/Lenovo/static/images/rilixi_icon_44px.png');
}
.maximum-repay{
    background-image: url('/FuLiBao/Lenovo/static/images/zuidahuankuan_icon_50-x-44px.png');
}
.freeze{
    background-image: url('/FuLiBao/Lenovo/static/images/dongjiejine_icon_32-X44-px.png');
}
.repay-img{
    width:22px;
    height:22px;
    background-size: 100%;
}
.mt-15{
    margin: 15px 0 15px 15px;
}
.tishi{
    color:#da1717;
    padding-right: 20px;
}
</style>
